<template>
	<view>
		<view class="choseView">
			<u-radio-group class="radioView" v-model="value" iconPlacement="right">
				<u-radio class="uRadio" :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1"
					:key="index" :name="item.bankName" @change="radioChange(item)">
					<view class="bankView">
						<image :src="item.bankURL" style="width: 35rpx;height: 35rpx; margin-right: 10rpx;"></image>
						{{item.bankName}}
					</view>
				</u-radio>
			</u-radio-group>
			<view class="title">
				{{banktitle}}
			</view>
		</view>
		<view class="cardView" v-if="bool">
			<view class="cardInfo" style="width: 90%;margin: 0 auto;display: flex;align-items: center;">
				<image :src="cardInfo.url" style="width: 45rpx;height: 30rpx;" mode=""></image>
				<view class="cardText">
					{{cardInfo.bankName}}
				</view>
			</view>
			<view class="cardNums">
				<input class="input" placeholder="银行卡号" v-model="cardInfo.bankNumbers"></input>
			</view>
			<view class="cardSubmit">
				<u-button type="primary" @click="change" text="确定"></u-button>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		postPersonBankList,
		allBankList
	} from "@/ww.js"
	import {
		toast
	} from "@/common.js"
	export default {
		data() {
			return {
				radiolist1: [],
				banktitle: '',
				cardInfo: {
					url: '',
					bankName: '',
					bankNumbers: ''
				},
				bool: false,
				value: '',
				show: false
			}
		},
		onLoad() {
			this.getRadioList()
		},
		methods: {
			getRadioList() {
				allBankList().then(res => {
					if (res.code == 200) {
						this.radiolist1 = res.data.result
						this.banktitle = '仅支持' + res.data.length + '家银行'
					}
				})
			},
			radioChange(n) {
				this.cardInfo.url = n.bankURL
				this.cardInfo.bankName = n.bankName
				this.bool = true
			},
			change() {
				console.log(this.cardInfo.bankNumbers)
				this.cardInfo.username = uni.getStorageSync('userInfo').username
				const rules = /^\d+$/
				if (rules.test(this.cardInfo.bankNumbers) && this.cardInfo.bankNumbers.length == 19) {
					postPersonBankList(this.cardInfo).then(res => {
						if (res.code == 200) {
							toast('新增成功')
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 500)
						}
					})
				} else {
					this.$refs.uToast.show({
						type: 'error',
						title: 'error',
						message: "请检查卡号或者银行是否选择正确",
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.choseView {
		width: 94vw;
		margin: 5vw auto;
		height: 33vh;
		overflow-y: auto;
		background-color: #fff;
		border-radius: 15rpx;
		box-shadow: 0px 5px 10px #888888;

		.radioView {
			width: 100%;
		}

		.title {
			width: 100%;
			display: flex;
			justify-content: center;
			font-size: 26rpx;
			padding: 1vw 0;
		}
	}

	::v-deep .u-radio-group {
		flex-direction: column !important;
	}

	::v-deep .u-radio {
		width: 90%;
		margin: 1.5vw auto;
	}

	.cardView {
		width: 94vw;
		margin: 2vw auto;
		background-color: #fff;
		border-radius: 15rpx;
		box-shadow: 0px 5px 10px #888888;
	}

	.input {
		border-bottom: 1px solid #cdcdcd;
		padding: 1vw 0;
	}

	.cardNums {
		width: 90%;
		margin: 0 auto;
		padding-bottom: 1vw;
	}

	::v-deep .u-toast__content__text {
		line-height: 20px !important;
	}

	.cardSubmit {
		width: 70%;
		margin: 0 auto;
		padding: 2vw 0;
	}
</style>